<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Basic DataGrid - jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="../../uimaker/easyui.css">
	<link rel="stylesheet" type="text/css" href="../../uimaker/icon.css">
	<link rel="stylesheet" type="text/css" href="../demo.css">
	<script type="text/javascript" src="../../jquery.min.js"></script>
	<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
	<style>
		html{
			height: 100%;
			background: url(../map.jpg) no-repeat;
		}
		body{
			background: url(../../uimaker/images/dialog_bg.png) no-repeat;
			background-size: 100% 100%;
			padding: 50px;
		}
	</style>
</head>
<body>
	<h2>Basic DataGrid</h2>
	<p>The DataGrid is created from markup, no JavaScript code needed.</p>
	<div style="margin:20px 0;"></div>
	
	<table class="easyui-datagrid" title="Basic DataGrid" style="width:700px;height:250px">
		<thead>
			<tr>
				<th data-options="field:'itemid',width:80">序号</th>
				<th data-options="field:'productid',width:200">名称</th>
				<th data-options="field:'listprice',width:100">经度</th>
				<th data-options="field:'unitcost',width:100">纬度</th>
				<th data-options="field:'attr1',width:70">xx</th>
			</tr>
		</thead>
	</table>

</body>
<script>
	$('.easyui-datagrid').datagrid({
	data:[
	{"productid":"某某某海域","productname":"Koi","unitcost":83.12549,"status":"P","listprice":21.59424,"attr1":"xx","itemid":"1"},
	{"productid":"某某某海域","productname":"Dalmation","unitcost":83.12549,"status":"P","listprice":21.59424,"attr1":"xx","itemid":"2"},
	{"productid":"某某某海域","productname":"Rattlesnake","unitcost":83.12549,"status":"P","listprice":21.59424,"attr1":"xx","itemid":"3"},
	{"productid":"某某某海域","productname":"Rattlesnake","unitcost":83.12549,"status":"P","listprice":21.59424,"attr1":"xx","itemid":"4"},
	{"productid":"某某某海域","productname":"Iguana","unitcost":83.12549,"status":"P","listprice":21.59424,"attr1":"xx","itemid":"5"}
],
    columns:[[
		{field:'itemid',title:'序号',width:60,align:"center"},
		{field:'productid',title:'名称',width:200},
		{field:'listprice',title:'经度',width:100},
		{field:'unitcost',title:'纬度',width:100},
		{field:'attr1',title:'xx',width:70,formatter:formatPrice}
    ]]
});
	function formatPrice(val,row){
		if (row.itemid == 0){
			return '<span style="color:#3d8bb9;">'+val+'</span>';
		} else if(row.itemid == 1) {
			return '<span style="color:#f62d25;">'+val+'</span>';
		}else if(row.itemid == 2) {
			return '<span style="color:#c57b10;">'+val+'</span>';
		}else if(row.itemid == 3) {
			return '<span style="color:#3ca33a;">'+val+'</span>';
		}else{
			return '<span style="color:#3d8bb9;">'+val+'</span>';
		}
	}
</script>
</html>